<template>
  <view>
    <view class="d-flex d-flex-column d-flex-middle">
      <view v-if="showVideoPlayer" style="height: 560rpx" class="video-player-container">
        <video
            :src="course_detail.catalogues_url"
            controls
            autoplay
            style="width: 750rpx; height: 560rpx;"
            @close="showVideoPlayer = false"
            @error="onVideoError"
            @waiting="onVideoWaiting"
            @playing="onVideoPlaying"
        ></video>
      </view>
      <view v-else @click="playVideo(course_detail.id)" class="image-container">
        <image
            class="ist-bg"
            :src="course_detail?.course_image"
            style="height: 560rpx; width: 100%"
        ></image>
        <text class="iconfont icon-shipinbofanganniu play-button"></text>
      </view>

    </view>
    <view class="p-2">
      <view class="font-bold font30 mt-1 text-clamp-two">{{ course_detail?.course_name }}</view>
      <view class="font24 mt-3 color999 ch_h d-flex d-flex-middle d-flex-between">
        <view>
          <text>{{ course_detail.created_at }}</text>
          <text class="ml-2">{{ course_detail.sort }}课时</text>
        </view>

      </view>
    </view>

    <view>
      <view class="tab-container p-2 bg-fff d-flex d-flex-around main-color px-2">
        <view
            v-for="(item, index) in tabList"
            :key="index"
            :class="{'grabClassActive': activeTab === item.id}"
            class="main-color font28"
            @click="switchTab(item.id)"
        >
          {{ item.title }}
        </view>
      </view>

      <view v-if="activeTab == 0" class="p-2 color-92 course-intro">
        {{ course_detail.course_introduction }}
      </view>

      <view v-if="activeTab == 2" class="p-2 color-92 course-intro">
        {{ course_detail.inst }}
      </view>

      <view v-if="activeTab == 1" class="chapter-content p-2">

        <view v-for="(stage, stageIndex) in courselist.category_courses" :key="stageIndex" class="pb-2 stage-item">

          <view class="color-92 lesson-list pl-3 p-3 bg-ffff rounded10 basic-shadow">
            <view
                class="lesson-item d-flex d-flex-middle d-flex-between"
                @click="startListening(stage.id,stage.course_name )"
            >
              <view class="d-flex d-flex-column d-flex-item">
                <text class="font26 text-clamp">{{ stage.course_name }}</text>
                <view class="mt-1">
                  <text class="font24 color999">{{ stage.category_name }}</text>
                  <text class="color999 font20 ml-2">{{ stage.id }} 课时</text>
                </view>
              </view>

              <view class="ml-2 ">
                <text class="iconfont icon-shipinbofanganniu font50 colorb0"></text>
              </view>
            </view>
          </view>

        </view>
      </view>

      <view v-if="activeTab == 3" class="p-4 pb-7">
        <view v-if="comments && comments.length > 0" class="d-flex comment-divider pb-2 mb-4 mx-4"
              v-for="(item,index) in comments" :key="index">
          <image class="avatar-image" :src="item?.user?.avatar" mode="aspectFill"></image>
          <view class="ml-2 d-flex-item">
            <view class="d-flex d-flex-between">
              <text class="color-92">{{ item?.user?.name }}</text>
              <text
                  class="iconfont icon-shenglvehao font40 main-color"
                  @click="toggleCommentActions(item,index)"
              ></text>
            </view>
            <view class="pt-1 pb-2 font20" style="color: rgba(92, 92, 92, 0.6)">{{ item.created_at }}</view>
            <view class="color-92 pb-3 font26">{{ item.content }}</view>
            <view class="d-flex d-flex-between">
              <text class="d-flex-2 color-92 font20" @click="goReplyPopup(item, item.user)">回复</text>
              <view class="d-flex d-flex-between d-flex-middle d-flex-item">
                <text class="iconfont icon-dianzan"></text>
                <view class="rotate180">
                  <text class="iconfont icon-dianzan "></text>
                </view>
              </view>
            </view>
            <view v-if="item.total_replies>0"
                  class="mt-2 bg-fff px-2 py-1 font20 color-92 rounded10 d-flex d-flex-middle"
                  style="color: rgba(92, 92, 92, 0.6)"
                  @click="toggleCommentReplies(index, item.id)">
              {{ expandedComments.has(index) ? '收起' : '展开' }}{{ item.total_replies }}条回复
              <text
                  :class="['font30', 'iconfont', expandedComments.has(index) ? 'icon-jiantou_liebiaoshouqi_o' : 'icon-jiantou_liebiaozhankai_o', 'font-bold']"></text>
            </view>

            <!-- 回复列表展示区域 -->
            <view v-if="expandedComments.has(index) && item.replies" class="replies-container pl-4">
              <view v-for="(reply, replyIndex) in item.replies" :key="replyIndex" class="reply-item py-2">
                <view class="d-flex">
                  <image class="avatar-image small" :src="reply?.user?.avatar || '/static/default-avatar.png'"
                         mode="aspectFill"></image>
                  <view class="ml-2 flex-1">
                    <view class="font24" style="color: rgba(92, 92, 92, 0.4)">{{ reply?.user?.name || '匿名用户' }}
                      <text class="iconfont icon-Rrl_s_048 font20"></text>
                      {{ reply?.reply_to_user?.name || '匿名用户' }}
                    </view>
                    <view class="font24 color-92 my-1">{{ reply.content }}</view>
                    <view class="font20" style="color: rgba(92, 92, 92, 0.4)">
                      <text>{{ reply.created_at }}</text>
                      <text class="d-flex-2 color-92 font20 ml-3" @click="goReplyPopup(reply, reply.user)">回复</text>

                    </view>
                  </view>
                </view>
              </view>
              <!-- 添加展开更多按钮 -->
              <view v-if="item.has_more_replies"
                    class="more-replies-btn text-center py-2 color-92 font24"
                    @click="loadMoreReplies(item.id)">
                展开更多回复
                <text class="iconfont icon-jiantou_liebiaozhankai_o ml-1"></text>
              </view>

            </view>
          </view>
        </view>

        <view v-else class="load-more d-flex d-flex-center d-flex-column d-flex-middle">
          <image class="mb-2" v-if="loadingType == 2 && comments.length == 0"
                 src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/empty.png"
                 style="width: 198rpx;height: 128rpx;margin-top: 130rpx;"></image>
          <text class="font24">
            {{ loadingType === 0 ? '上拉显示更多' : (loadingType === 1 ? '正在加载...' : '暂无评论，欢迎来评论') }}
          </text>
        </view>
      </view>

      <view v-if="activeTab != 3" class="fixedBtn bg-fff pt-2 px-2 pb-5 d-flex d-flex-between font24  d-flex-middle">
        <view class="d-flex  d-flex-item ml-3">
          <text
              :class="['iconfont font40', isFavorite ? 'icon-shoucang-copy coloryellow' : 'icon-shoucangxingxing']"
              @click="toggleFavorite(course_detail.id)"
          ></text>
          <view class="ml-5">
            <image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/listen.png"
                   style="width: 44rpx;height: 44rpx"></image>
          </view>
        </view>
        <view class="ml-5 py-1 rounded30 colorfff font28 bg-main d-flex-item text-center"
              @click="goUrl('/subPages/memberCenter/memberCenter')">专享VIP
        </view>
      </view>

      <view v-if="activeTab == 3" class="fixedBtn bg-fff pt-2 px-2 pb-5 d-flex d-flex-between font24  d-flex-middle">
        <view class="d-flex d-flex-between d-flex-item d-flex-around" @click="goReplyPopup()">
          <input
              class="comment-input rounded40"
              type="text"
              placeholder="留下点什么吧..."
              placeholder-style="color: rgba(92, 92, 92, 0.6)"
              v-model="replyContent"
          />
          <view class="iconfont icon-xiaolian main-color font56 ml-2"></view>
        </view>
      </view>

      <uni-popup
          ref="replyPopup"
          type="bottom"
          :safe-area="false"
          mode="bottom"
          :safeAreaInsetBottom="false"
          @close="closeReplyPopup"
          :animation="true"
      >
        <view class="reply-popup-content">
          <view class="popup-header">
            <text @click="closeReplyPopup">取消</text>
            <text :class="{ 'active': replyContent.trim() }" @click="submitReply">发布</text>
          </view>
          <view class="popup-input-container">
            <input
                v-model="replyContent"
                :placeholder="'回复 @' + (currentReplyUser?.name || '用户')"
                :focus="isPopupOpen"
                @confirm="submitReply"
                :cursor-spacing="20"
                :adjust-position="true"
                :show-confirm-bar="false"
            />
          </view>
        </view>
      </uni-popup>

      <uni-popup ref="commentActionsPopup" type="bottom" :safe-area="false">
        <view class="comment-actions-popup">
          <view class="popup-content">
            <view class="popup-item bg-fff main-color" @click="handleDeleteComment">删除</view>
            <view class="popup-item bg-fff" @click="handleReplyComment">回复</view>
            <view class="popup-item mt-2 cancel-item bg-fff pb-5" @click="closeCommentActions">取消</view>
          </view>
        </view>
      </uni-popup>
    </view>

  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {homeApi} from "@/http/homeApi";

export default {
  data() {
    return {
      activeTab: 0,
      stageExpanded: false,
      activeButton: null,
      // 标签列表
      tabList: [
        {title: '课程介绍', id: 0},
        {title: '专业目录', id: 1},
        {title: '讲师介绍', id: 2},
        {title: '课程评论', id: 3}
      ],
      showCommentActions: false,
      courselist: [],
      course_detail: {},
      showVideoPlayer: false,

      //评论
      comments: [], //主数据
      cIndex: 0,//0 代表主新增，1代表子新增
      expandedComments: new Set(),
      replyContent: '',
      currentReplyComment: null,
      currentReplyUser: null,
      isPopupOpen: false,
      twoCommentId: '',
      currentPage: 1,
      page: 1,
      loadingType: 1,
      // 删除评论的弹窗
      showCommentActions: false,
      selectedComment: null,
      selectedCommentIndex: -1,
      isFavorite: false, // 添加收藏状态
    }
  },
  computed: {
    ...mapState({
      statusBarHeight: state => state.statusBarHeight,
      menuButtonHeight: state => state.menuButtonHeight,
      titleBarHeight: state => state.titleBarHeight,
      avatar: state => state.avatar,
      loginState: state => state.loginState
    })
  },
  onLoad(options) {
    console.log(options)
    // 获取上一页传递的参数
    if (options && options.id) {
      const courseId = options.id;
      console.log('课程ID:', courseId);
      // 在这里可以根据 courseId 获取课程详情数据
      this.getCourseDetails(courseId);
      this.goNotificationsComments(courseId)
    }
  },
  methods: {
    async getCourseDetails(courseId) {
      try {
        const response = await homeApi.getCourse({id: courseId});
        console.log('获取课程详情成功:', response);
        this.courselist = response;
        this.course_detail = response.course_detail;
        // 初始化收藏状态（假设接口返回中包含 is_favorite 字段）
        this.isFavorite = this.course_detail.is_favorite || false;

      } catch (error) {
        console.error('获取课程详情失败:', error);
      }
    },
    switchTab(tabId) {
      this.activeTab = tabId;
    },
    // 添加视频相关事件处理
    onVideoError(e) {
      console.error('视频播放出错:', e);
      uni.showToast({
        title: '视频播放失败',
        icon: 'none'
      });
    },

    onVideoWaiting() {
      console.log('视频正在缓冲...');
      // 可以在这里显示加载提示
    },

    onVideoPlaying() {
      console.log('视频开始播放');
      // 视频正常播放时的处理
    },

    async playVideo(id) {
      console.log(this.course_detail?.catalogues_url)
      if (this.course_detail?.catalogues_url) {
        this.showVideoPlayer = true;
        // 播放记录课程
        await homeApi.getWatch({id: id});
      } else {
        uni.showToast({
          title: '视频地址无效',
          icon: 'none'
        });
      }
    },
    startListening(id, name) {
      console.log('开始试听');
      // 添加实际的播放逻辑
      uni.showToast({
        title: `切换课程${name}`,
        icon: 'none'
      });
      this.getCourseDetails(id);

      // 回到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });

      // 重新播放逻辑
      this.$nextTick(() => {
        this.showVideoPlayer = false;
      });
    },
    async goNotificationsComments(id, data) {
      this.loadingType = 1
      try {
        let params = {
          id: id,
          page: this.currentPage
        }
        let res = await homeApi.getCourseComments(params);
        if (this.twoCommentId && data) {
          // 走添加回复列表
          this.loadMoreReplies(this.twoCommentId, this.page)
        } else {
          if (res.list) {
            if (this.currentPage === 1) {
              this.comments = res.list;
            } else {
              this.comments = this.comments.concat(res.list);
            }
          }
          if (res.list && res.list.length > 9) {
            this.loadingType = 0
          } else {
            this.loadingType = 2
          }
        }

      } catch (error) {
        this.loadingType = 2

        console.error('获取新闻详情失败:', error);
      }
    },
    // 切换评论回复的展开状态
    async toggleCommentReplies(commentIndex, commentId) {
      if (this.expandedComments.has(commentIndex)) {
        // 如果已展开，则收起
        this.expandedComments.delete(commentIndex);
      } else {
        // 如果未展开，则展开
        this.expandedComments.add(commentIndex);
        // 首次展开时加载回复数据
        if (!this.comments[commentIndex].replies) {
          await this.loadCommentReplies(commentIndex, commentId);
        }
      }
    },

    // 加载评论回复数据
    async loadCommentReplies(commentIndex, commentId) {
      try {
        const res = await homeApi.getCommentReplies(commentId);
        if (res && res.list) {
          // 使用Vue.set确保响应式更新
          this.$set(this.comments[commentIndex], 'replies', res.list);
        }
      } catch (error) {
        console.error('加载评论回复失败:', error);
        uni.showToast({
          title: '加载回复失败',
          icon: 'none'
        });
      }
    },
    // 加载更多回复
    async loadMoreReplies(commentId, oldPage) {
      try {
        // 获得2级里面的id
        this.twoCommentId = commentId
        // 查找对应的评论索引
        const commentIndex = this.comments.findIndex(comment => comment.id === commentId);
        if (commentIndex === -1) {
          console.error('未找到对应的评论');
          return;
        }

        // 获取当前评论的分页信息
        const currentPage = this.comments[commentIndex].reply_page || 1;
        console.log(currentPage)

        if (oldPage) {
          this.page = oldPage
        } else {
          this.page = currentPage
        }

        let params = {
          id: commentId,
          page: this.page
        }

        const res = await homeApi.getCourseCommentsReplies(params);
        if (res && res.list) {
          // 获取当前已有的回复
          const currentReplies = this.comments[commentIndex].replies || [];

          // 追加新加载的回复到现有回复列表中
          const updatedReplies = [...currentReplies, ...res.list];
          this.$set(this.comments[commentIndex], 'replies', updatedReplies);

          // 更新分页信息
          this.$set(this.comments[commentIndex], 'reply_page', this.page + 1);

          // 更新 has_more_replies 状态
          this.$set(this.comments[commentIndex], 'has_more_replies', res.has_more);
        }
      } catch (error) {
        console.error('加载更多回复失败:', error);
        uni.showToast({
          title: '加载更多回复失败',
          icon: 'none'
        });
      }
    },
    // 提交回复
    async submitReply() {
      if (!this.replyContent.trim()) {
        uni.showToast({
          title: '请输入回复内容',
          icon: 'none'
        });
        return;
      }
      console.log(this.currentReplyComment, 'currentReplyComment')
      try {
        const params = {
          course_id: this.course_detail.id,
          content: this.replyContent.trim(),
          parent_id: this.currentReplyComment?.id || ''
        };

        // 调用API提交回复
        const res = await homeApi.courseComments(params);

        uni.showToast({
          title: '回复成功',
          icon: 'success'
        });


        if (this.cIndex == 0) {
          // 主评论新增 - 添加到评论列表开头
          if (res) {
            this.comments.unshift(res);
          }
        } else if (this.cIndex == 1) {
          if (res) {
            console.log(this.comments, 'this.comments')
            console.log(this.currentReplyComment.id, this.currentReplyComment.parent_id)
            // 查找父评论的索引（包括一级和二级评论）
            let parentIndex = this.comments.findIndex(comment =>
                comment.id === this.currentReplyComment.id ||
                comment.id === this.currentReplyComment.parent_id
            );

            // 如果在一级评论中没找到，继续在二级回复中查找
            if (parentIndex === -1) {
              for (let i = 0; i < this.comments.length; i++) {
                const comment = this.comments[i];
                if (comment.replies && Array.isArray(comment.replies)) {
                  const replyIndex = comment.replies.findIndex(reply =>
                      reply.id === this.currentReplyComment.id ||
                      reply.id === this.currentReplyComment.parent_id
                  );
                  if (replyIndex !== -1) {
                    parentIndex = i; // 找到二级评论，返回其所属的一级评论索引
                    break;
                  }
                }
              }
            }
            if (parentIndex !== -1) {
              // 确保 replies 数组存在
              if (!this.comments[parentIndex].replies) {
                this.$set(this.comments[parentIndex], 'replies', []);
              }
              // 添加新回复到父评论的回复列表
              this.comments[parentIndex].replies.push(res);
              // 更新回复计数
              this.$set(this.comments[parentIndex], 'total_replies',
                  (this.comments[parentIndex].total_replies || 0) + 1);
              // console.log(this.comments[parentIndex])
            }
          }
        }

        this.closeReplyPopup();

      } catch (error) {
        console.error('回复失败:', error);
        uni.showToast({
          title: '回复失败',
          icon: 'none'
        });
      }
    },
    goReplyPopup(comment, user) {
      console.log(comment, user, '5555')
      if (!comment) {
        this.cIndex = 0; // 主评论新增
      } else {
        this.cIndex = 1; // 子评论回复
      }
      this.currentReplyComment = comment;
      this.currentReplyUser = user;

      this.replyContent = '';
      this.isPopupOpen = false;

      this.$nextTick(() => {
        if (this.$refs.replyPopup) {
          this.$refs.replyPopup.open();
          // 使用更精确的延时和重试机制
          const focusInput = () => {
            setTimeout(() => {

              this.isPopupOpen = true;
            }, 300);
          };
          // 首次尝试
          focusInput();
        }
      });
    },

    closeReplyPopup() {
      this.isPopupOpen = false;
      if (this.$refs.replyPopup) {
        this.$refs.replyPopup.close();
      }
      this.replyContent = '';
      this.currentReplyComment = null;
      this.currentReplyUser = null;
    },
    //   删除评论
    toggleCommentActions(comment, index) {
      this.selectedComment = comment;
      this.selectedCommentIndex = index;
      if (this.$refs.commentActionsPopup) {
        this.$refs.commentActionsPopup.open();
      }
    },

    // 关闭弹窗
    closeCommentActions() {
      if (this.$refs.commentActionsPopup) {
        this.$refs.commentActionsPopup.close();
      }
    },

    // 处理删除评论
    handleDeleteComment() {
      if (!this.selectedComment) return;

      uni.showModal({
        title: '提示',
        content: '确定要删除这条评论吗？',
        success: (res) => {
          if (res.confirm) {
            this.performDeleteComment();
          }
        }
      });
    },

    // 执行删除评论操作
    async performDeleteComment() {
      try {
        // 调用删除API
        console.log(this.selectedComment.id, 'this.selectedComment.id')
        await homeApi.delCourse({id: this.selectedComment.id});

        // 从本地列表中移除
        this.comments.splice(this.selectedCommentIndex, 1);

        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });

        this.closeCommentActions();
      } catch (error) {
        console.error('删除评论失败:', error);
        uni.showToast({
          title: '删除失败',
          icon: 'none'
        });
      }
    },

    // 处理回复评论
    handleReplyComment() {
      // 先干掉
      this.closeCommentActions();
      if (this.selectedComment) {
        this.goReplyPopup(this.selectedComment, this.selectedComment.user);
      }
    },
    async toggleFavorite(id) {
      try {
        if (this.isFavorite) {
          // 取消收藏
          await homeApi.removeFavorite({course_id: id});
          this.isFavorite = false;
          uni.showToast({
            title: '已取消收藏',
            icon: 'none'
          });
        } else {
          // 添加收藏
          await homeApi.addFavorite({course_id: id});
          this.isFavorite = true;
          uni.showToast({
            title: '收藏成功',
            icon: 'success'
          });
        }
      } catch (error) {
        console.error('收藏操作失败:', error);
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
      }
    },
    goUrl(urlPages, data) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
        uni.navigateTo({
          url: urlPages
        })
      }
    }
    }
  }
</script>

<style scoped>

.course-intro {
  text-indent: 2em; /* 首行缩进2个字符 */
  white-space: pre-line; /* 保持换行符 */
}

.course-intro::first-line {
  text-indent: 2em;
}

.fixedBtn {
  position: fixed;
  bottom: 0;
  width: calc(100% - 40rpx);
}


.color-5C5C5CCC {
  color: #5C5C5CCC;
}

.grabClassActive {
  font-weight: bold;
  text-decoration: underline;
}


.lesson-item {
  border-bottom: 1rpx solid #f0f0f0;

}

.lesson-item:last-child {
  border-bottom: none;
}


.rotate180 {
  transform: rotate(180deg);
}


.color-92 {
  color: rgba(92, 92, 92, 1);
}

.bg-ffff {
  background: rgba(255, 255, 255, 0.7);
}

.d-flex-2 {
  flex: 2;
}

.avatar-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(171, 206, 255, 1);
}

.comment-divider {
  border-bottom: 1px solid rgba(92, 92, 92, 0.2);
}

.comment-actions-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.popup-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.popup-item {
  padding: 20rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
  color: #333;
}

.popup-item:last-child {
  border-bottom: none;
}

.cancel-item {
  color: #999;
  font-weight: bold;
}

.comment-input {
  background-color: rgba(235, 235, 235, 1);
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  width: 100%;
}

.basic-shadow {
  box-shadow: 0 2px 4px rgba(115, 115, 115, 0.1);
}

.image-container {
  position: relative;
  width: 100%;
  height: 560rpx;
  cursor: pointer;
}

.image-container:active {
  opacity: 0.9;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100rpx;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.3);
  width: 750rpx;
  height: 560rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.play-button::before {
  margin-left: 10rpx;
}


.small {
  width: 30rpx;
  height: 30rpx;
}

.replies-container {
  background-color: #f8f8f8;
  border-radius: 10rpx;
  margin-top: 10rpx;
}

.reply-item {
  border-bottom: 1px solid rgba(92, 92, 92, 0.1);
}

.reply-item:last-child {
  border-bottom: none;
}

.flex-1 {
  flex: 1;
}

.reply-popup-content {
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 20rpx;
  overflow-y: auto;
  /* 移除 margin-bottom 或调整为 0 */
  margin-bottom: 0;
  /* 添加最小高度确保内容可见 */
  min-height: 200rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-header text:last-child {
  color: #ccc;
  font-weight: bold;
}

.popup-header text:last-child.active {
  color: #3a7afe;
}

.popup-input-container input {
  padding: 20rpx;
  margin-top: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.more-replies-btn {
  color: #3a7afe;
  border-top: 1px solid rgba(92, 92, 92, 0.1);
  margin-top: 10rpx;
}

.comment-actions-popup {
  background-color: #f5f5f5;
}

.popup-content {
  padding: 20rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  background-color: #fff;
}

.popup-item {
  padding: 30rpx;
  text-align: center;
  font-size: 28rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-item:last-child {
  border-bottom: none;
}

.cancel-item {
  color: #999;
}

.pb-7 {
  padding-bottom: 90rpx;
}
</style>
